<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS下划线动画</title>
  <style>
    .title {
      color: #333;
      line-height: 2;
    }
    .title span {
      background: linear-gradient(to right, #7e2f2b, #146420) no-repeat right bottom;
      background-size: 0 2px;
      transition: background-size 1s;
    }
    .title span:hover {
      background-position: left bottom;
      background-size: 100% 2px;
    }
  </style>
</head>
<body>
  <h2 class="title"><span>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quo nostrum consectetur temporibus? Quaerat, ipsam, similique voluptas recusandae minima eius dolor excepturi, nesciunt neque adipisci esse ut expedita eveniet voluptate.
    Odit error perspiciatis, excepturi sunt iusto facere inventore quasi enim. Officiis voluptatem doloremque soluta exercitationem qui! Amet asperiores alias aut quaerat debitis autem necessitatibus provident aliquam esse? Porro, vel omnis?
    Tenetur, fugit facere repellendus eveniet aliquam quasi, voluptatibus a itaque neque repudiandae labore culpa ipsa eos distinctio deserunt voluptate ut. Sequi ullam quaerat animi maxime libero totam nisi nulla. Fuga!
  </span></h2>
</body>
</html>